<template>
  <div class="event-line-area card-area">
    <div class="card-title">
      <h3>{{ cardTitle }}事件趋势</h3>
    </div>
    <div class="content-area">
      <div class="event-chart" ref="eventChart"></div>
    </div>
  </div>
</template>

<script>
const chartData = [
  {
    "viewDay": "20240401",
    "eventNum": 15
  },
  {
    "viewDay": "20240402",
    "eventNum": 3
  },
  {
    "viewDay": "20240403",
    "eventNum": 4
  },
  {
    "viewDay": "20240404",
    "eventNum": 1
  },
  {
    "viewDay": "20240405",
    "eventNum": 4
  },
  {
    "viewDay": "20240406",
    "eventNum": 1
  },
  {
    "viewDay": "20240407",
    "eventNum": 11
  },
  {
    "viewDay": "20240408",
    "eventNum": 0
  },
  {
    "viewDay": "20240409",
    "eventNum": 0
  },
  {
    "viewDay": "20240410",
    "eventNum": 0
  },
  {
    "viewDay": "20240411",
    "eventNum": 0
  },
  {
    "viewDay": "20240412",
    "eventNum": 0
  },
  {
    "viewDay": "20240413",
    "eventNum": 0
  },
  {
    "viewDay": "20240414",
    "eventNum": 0
  },
  {
    "viewDay": "20240415",
    "eventNum": 0
  },
  {
    "viewDay": "20240416",
    "eventNum": 0
  },
  {
    "viewDay": "20240417",
    "eventNum": 0
  },
  {
    "viewDay": "20240418",
    "eventNum": 0
  },
  {
    "viewDay": "20240419",
    "eventNum": 0
  },
  {
    "viewDay": "20240420",
    "eventNum": 0
  },
  {
    "viewDay": "20240421",
    "eventNum": 0
  },
  {
    "viewDay": "20240422",
    "eventNum": 0
  },
  {
    "viewDay": "20240423",
    "eventNum": 0
  },
  {
    "viewDay": "20240424",
    "eventNum": 0
  },
  {
    "viewDay": "20240425",
    "eventNum": 0
  },
  {
    "viewDay": "20240426",
    "eventNum": 0
  },
  {
    "viewDay": "20240427",
    "eventNum": 2
  },
  {
    "viewDay": "20240428",
    "eventNum": 0
  },
  {
    "viewDay": "20240429",
    "eventNum": 0
  }
];
import {formatTimeByMoment} from '@/utils/time.js'

export default {
  name: "EventLine",
  data() {
    return {}
  },
  props: {
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  computed: {
    cardTitle() {
      switch (this.viewType) {
        case 2:
          return '攻击组织';
        case 3:
          return '恶意域名';
        case 4:
          return '恶意IP';
      }
    }
  },
  methods: {
    initComp() {
      console.log('折线图组件获取数据了------', this.datePickerValue);
      new Promise((resolve) => {
        resolve(true);
      }).then(() => {
        this.formatData(chartData)
      })
    },
    formatData(data) {
      const XData = [];
      const SData = [];
      for (const item of data) {
        XData.push(formatTimeByMoment(item.viewDay, 'MM-DD'));
        SData.push(item.eventNum + Math.floor(Math.random() * 50));
      }
      this.initChart(XData, SData, data);
    },
    initChart(XData, SData) {
      const option = {
        tooltip: {
          trigger: "axis",
          /*formatter(params) {
            console.log(params)
          }*/
        },
        grid: {
          top: 10,
          bottom: 0,
          left: '1%',
          right: '2%',
          containLabel: true,
        },
        legend: {
          show: false
        },
        color: ["#426bda"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: XData,
          axisLabel: {
            interval: 5,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.65)',
            },
          },
        },
        yAxis: [
          {
            name: "",
            position: "left",
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#E8E8E8",
              },
            },
            axisLine: {
              show: false,
            },

            axisTick: {
              show: false,
            },
          }
        ],
        series: [
          {
            name: "数量",
            type: "line",
            smooth: true,
            data: SData,
          },
        ],
      };
      let chart = this.$echarts.init(this.$refs.eventChart);
      chart.setOption(option, true);
      chart.resize(true);
    }
  }
}
</script>

<style lang="scss">
.event-line-area.card-area {
  width: 430px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .card-title {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;

    > h3 {
      color: #808191;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .content-area {
    width: 100%;
    height: 253px;
    padding: 0 15px 15px 15px;

    .event-chart {
      width: inherit;
      height: 233px;
    }
  }
}
</style>